<template>
  <div class="rating_page">
    <head-top head-title="我的优惠" :go-back='true'></head-top>
    <section class="tab">
      <switches @switch="doSwitches" :currentIndex="currentIndex" :switches="switches"></switches>
    </section>
    <transition namde="router-slid">
      <section v-if="currentIndex===0">
        <section class="hongbao_container">
          <header class="hongbao_title">
            <section class="total_number">
              有 <span>{{hongbaoList.length}}</span> 个红包即将到期
            </section>
            <section class="hongbao_description">
              <img src="../../images/description.png" height="24" width="24">
              <router-link to="/benefit/hbDescription" class="hongbao_detail">红包说明</router-link>
            </section>
          </header>
          <ul class="hongbao_list_ul">
            <li class="hongbao_list_li" v-for="item in hongbaoList" :key="item.id">
              <section class="list_item">
                <div class="list_item_left">
                  <span>¥</span>
                  <span>{{String(item.amount).split('.')[0]}}</span>
                  <span>.</span>
                  <span>{{String(item.amount).split('.')[1]||0}}</span>
                  <p>{{item.description_map.sum_condition}}</p>
                </div>
                <div class="list_item_right">
                  <h4>{{item.name}}</h4>
                  <p>{{item.description_map.validity_periods}}</p>
                  <p>{{item.description_map.phone}}</p>
                </div>
                <div class="time_left">{{item.description_map.validity_delta}}</div>
              </section>
              <footer class="list_item_footer" v-if="item.limit_map">
                <p>{{item.limit_map.restaurant_flavor_ids}}</p>
              </footer>
            </li>
          </ul>
        </section>
        <router-link to="/benefit/hbHistory" class="history_hongbao">
          <span class="check_history">查看历史红包</span>
          <span class="history_right">>></span>
        </router-link>
        <footer class="hongbao_footer">
          <router-link to="/benefit/exchange" class="hongbao_style" style="border-right: 1px solid #f5f5f5">
            兑换红包
          </router-link>
          <router-link to="/benefit/commend" class="hongbao_style">
            推荐有奖
          </router-link>
        </footer>
      </section>
    </transition>
    <transition namde="router-slid">
      <section v-if="currentIndex===1" class="voucher_container">
        <section class="hongbao_description voucher_header">
          <img src="../../images/description.png" height="24" width="24">
          <router-link to="/benefit/coupon" class="hongbao_detail">商家代金券说明</router-link>
        </section>
        <section class="unable_use">
          <img src="../../images/voucher.png" height="170" width="300">
          <p>无法使用代金券</p>
          <p>非客户端或客户端版本过低</p>
          <router-link to="/download" class="download_app">
            下载或升级客户端
          </router-link>
        </section>
      </section>
    </transition>
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <div class="loading-container" v-show="showloading">
      <loading></loading>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  import switches from 'components/common/switches/switches'
  import loading from 'components/common/loading/loading'
  import {getHongbaoNum} from 'src/service/getData'
  import {mapGetters} from 'vuex'
  export default {
    data(){
      return{
        switches:[
          {name:'红包'},
          {name:'商家代金卷'}
        ],
        currentIndex:0,
        hongbaoList:[],
        showloading:true
      }
    },
    created(){
    },
    mounted(){
      this.initData();
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      doSwitches(index){
        this.currentIndex = index;
      },
      async initData(){
        if(this.userInfo){
          this.hongbaoList = await await getHongbaoNum(this.userInfo.user_id);
          this.showloading = false;
        }
      }
    },
    watch: {
      userInfo: function (value){
       /* this.initData();*/
      }
    },
    components:{
      headTop,
      switches,
      loading
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../src/style/mixin';
  .rating_page{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;
    background:#f2f2f2;
    padding-top: 1.95rem;
  }
  .tab{
    position: relative;
    background-color: $fc;
    width:100%;
    height: auto;
    padding:0.2rem;
  }
  .hongbao_container{
    padding: 0 .7rem;
    .hongbao_title{
      @include fj;
      font-size: .5rem;
      line-height: 2rem;
      .total_number{
        color: #666;
        span{
          color: #ff5340;
        }
      }
    }
    .hongbao_list_ul{
      .hongbao_list_li{
        background: #fff url(../../images/hongbao.png) repeat-x ;
        background-size: .5rem .2rem;
        margin-bottom: 0.5rem;
        border-radius: 0.25rem;
        .list_item{
          @include fj;
          padding: 1rem 0.5rem .8rem;
          .list_item_left{
            font-size: 0;
            border-right: 0.025rem dotted #ccc;
            flex: 1;
            span:nth-of-type(1){
              @include sc(.75rem, #ff5340);
              font-weight: bold;
            }
            span:nth-of-type(2){
              @include sc(1.5rem, #ff5340);
            }
            span:nth-of-type(3), span:nth-of-type(4){
              @include sc(0.8rem, #ff5340);
              font-weight: bold;
            }
            p{
              @include sc(0.4rem, #999);
            }
          }
          .list_item_right{
            flex: 2;
            margin-left: 1.5rem;
            h4{
              @include sc(.7rem, #666);
              margin-left: -.7rem;
            }
            p{
              list-style-type: disc;
              margin-left: -.7rem;
              @include sc(.4rem, #999);
            }
          }
          .time_left{
            @include sc(.75rem, #ff5340);
          }
        }
        .list_item_footer{
          background-color: #f9f9f9;
          padding: .4rem .4rem;
          border-bottom-left-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
          p{
            list-style-type: disc;
            @include sc(.4rem, #999);
            margin-left: .4rem;
          }
        }
      }
    }
  }
  .hongbao_description{
    display: flex;
    align-items: center;
    img{
      @include wh(.6rem, .6rem);
      margin-right: .2rem;
    }
    .hongbao_detail{
      color: $blue;
    }
  }
  .voucher_header{
    justify-content: flex-end;
    font-size: .5rem;
    line-height: 2rem;
    margin-right: .5rem;
  }
  .unable_use{
    text-align: center;
    margin-top: 4rem;
    img{
      display: inline-block;
      @include wh(6rem, 3.4rem);
    }
    p:nth-of-type(1){
      @include sc(.7rem, #666);
      margin-top: .4rem;
    }
    p:nth-of-type(2){
      @include sc(.5rem, #999);
      margin-top: .3rem;
      margin-bottom: .6rem;
    }
    .download_app{
      background-color: #56d176;
      @include sc(.65rem, #fff);
      padding: .3rem;
      border-radius: .15rem;
    }
  }
  .history_hongbao{
    padding: .5rem 0 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .check_history{
      @include sc(.5rem, #999);
      margin-right: .2rem;
    }
    .history_right{
      color: #999;
    }
  }
  .hongbao_footer{
    position: fixed;
    bottom:0;
    width:100%;
    background-color: $fc;
    display: flex;
    .hongbao_style{
      flex:1;
      line-height: 2rem;
      text-align: center;
      @include sc(.7rem, #555);
    }
  }
  .router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
  }
  .router-slid-enter, .router-slid-leave-to {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }

</style>
